<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JSON数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // json 轻量的数据交互格式
        // 体积小，易于解析
        // 定义json对象
        // json = {key:value,k:v}   key必须是字符串的形式，必须“”所包裹
        // json数组
        // 定义 json = [值1，值2，值3，，，]
        //   实践-对象数组[{},{},{}]

    </script>
</head>

<body>

    一、JSON格式的user对象:<div id="objectDiv"></div><br>
    二、JSON格式的字符串数组:<div id="ArrayDiv"></div><br>
    三、JSON格式的user对象数组:<div id="objectArrayDiv"></div>


    <script>

        $(document).ready(function () {
            //1．定义JSON格式的user对象,并在id为objectDiv的DIV元素中输出
            var user = { "id": 1, "name": "张三", "pwd": "000" };
            $("#objectDiv").append("ID是" + user.id + "<br/>").append("用户名：" + user.name + "<br/>").append("密码：" + user.pwd)

            //2．定义JSON格式的字符串数组,并在id为ArrayDiv的DIV元素中输出
            var ary = ["中", "美", "俄"];
            for (let i = 0; i < ary.length; i++) {
                $("#ArrayDiv").append("国家:" + ary[i] + "<br/>")

            }

            //3．定义JSON格式的user对象数组,并在id为objectArrayDiv的DIV元素中
            //使用<table>输出
            var userArray = [
                { "id": 2, "name": "admin", "pwd": "123" },
                { "id": 3, "name": "詹姆斯", "pwd": "11111" },
                { "id": 4, "name": "梅西", "pwd": "6666" }
            ];
            // 按照表格的形式输出
            $("#objectArrayDiv").append("<table>").append("<tr>").append("<td>序号</td>").append("<td>用户名</td>").append("<td>密码</td>").append("</tr>")
            for (let i = 0; i < userArray.length; i++) {
                $("#objectArrayDiv").append("<tr>").append("<td>" + userArray[i].id + "</td>").append("<td>" + userArray[i].name + "</td>").append("<td>" + userArray[i].pwd + "</td>").append("</tr>").append("</table>");//所有对象中 的id值


            }

        });

    </script>

</body>

</html>